<!DOCTYPE html>
<html>
<head>
  {% load static %}
  <meta charset="utf-8">
  <title>table 组件综合演示 - Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="{% static './layui/css/layui.css' %}" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->
<div style="padding: 16px;">
  <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
<!--    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<!--    <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>-->


    <input class="layui-text" type="text" id="txtSearch" placeholder="查询条件" />
    <button class="layui-btn layui-btn-sm" data-type="Search" id="Search" lay-event="Search" style="margin-left: 10px">查询</button>


    <button class="layui-btn layui-btn-sm" id="dropdownButton">
      更多操作
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
<!--    <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">-->
<!--      重载测试-->
<!--      <i class="layui-icon layui-icon-down layui-font-12"></i>-->
<!--    </button>-->
<!--    <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">-->
<!--      <span>模式</span>-->
<!--      <i class="layui-icon layui-icon-down layui-font-12"></i>-->
<!--    </button>-->
  </div>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="my_delete">删除</a>
  </div>
</script>
<script src="{% static './layui/layui.js' %}"></script>
<script>
layui.use(['table', 'dropdown'], function(){
  var table = layui.table;
  var dropdown = layui.dropdown;

  // 创建渲染实例
  table.render({
    elem: '#test',
    url: '{%url "api:article_list" %}', // 此处为静态模拟数据，实际使用时需换成真实接口
    toolbar: '#toolbarDemo',
    defaultToolbar: ['filter', 'exports', 'print', {
      title: '提示',
      layEvent: 'LAYTABLE_TIPS',
      icon: 'layui-icon-tips'
    }],
    height: 'full-35', // 最大高度减去其他容器已占有的高度差
    css: [ // 重设当前表格样式
      '.layui-table-tool-temp{padding-right: 145px;}'
    ].join(''),
    cellMinWidth: 80,
    totalRow: true, // 开启合计行
    page: true,
    limit:10,
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field:'id', fixed: 'left', width:120, title: 'ID', sort: true, totalRowText: '合计：'},
      {field:'title', width:450, title: '标题'},
      {field:'imgSrc', width:120, title: '图片'},
      {field:'author', width:400, title: '作者'},
      {field:'reading', width:120, title: '阅读数'},
      {field:'collection', width:120, title: '收藏数'},
      {field:'dateTime', title:'发布时间', width: 120},
      {fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}
    ]],
    done: function(){
      var id = this.id;
      // 下拉按钮测试
      dropdown.render({
        elem: '#dropdownButton', // 可绑定在任意元素中，此处以上述按钮为例
        data: [
        {
          id: 'return',
          title: '返回首页'
        },{
          id: 'add',
          title: '添加'
        },
        ],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'add':
              layer.open({
                title: '添加文章',
                type: 2,
                area: ['80%','80%'],
                content: '{%url "test_admin:article1_add"%}'
              });
            break;
            case 'return':
              parent.location.reload();
            break;
          }
        }
      });

      // 行模式
      dropdown.render({
        elem: '#rowMode',
        data: [{
          id: 'default-row',
          title: '单行模式（默认）'
        },{
          id: 'multi-row',
          title: '多行模式'
        }],
        // 菜单被点击的事件
        click: function(obj){
          var checkStatus = table.checkStatus(id)
          var data = checkStatus.data; // 获取选中的数据
          switch(obj.id){
            case 'default-row':
              table.reload('test', {
                lineStyle: null // 恢复单行
              });
              layer.msg('已设为单行');
            break;
            case 'multi-row':
              table.reload('test', {
                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                lineStyle: 'height: 95px;'
              });
              layer.msg('即通过设置 lineStyle 参数可开启多行');
            break;
          }
        }
      });
    },
    error: function(res, msg){
      console.log(res, msg)
    }
  });

  // 工具栏事件
  table.on('toolbar(test)', function(obj){
    var id = obj.config.id;
    var checkStatus = table.checkStatus(id);
    var othis = lay(this);
    switch(obj.event){
      case 'getCheckData':
        var data = checkStatus.data;
        layer.alert(layui.util.escape(JSON.stringify(data)));
      break;
      case 'getData':
        var getData = table.getData(id);
        console.log(getData);
        layer.alert(layui.util.escape(JSON.stringify(getData)));
      break;
      case 'Search':
        table.reload('test', {
            where: {
              key_words: $('#txtSearch').val(),
            },
        });
      break;
      case 'LAYTABLE_TIPS':
        layer.alert('自定义工具栏图标按钮');
      break;
    };
  });
  // 表头自定义元素工具事件 --- 2.8.8+
  table.on('colTool(test)', function(obj){
    var event = obj.event;
    console.log(obj);
    if(event === 'email-tips'){
      layer.alert(layui.util.escape(JSON.stringify(obj.col)), {
        title: '当前列属性配置项'
      });
    }
  });

  // 触发单元格工具事件
  table.on('tool(test)', function(obj){ // 双击 toolDouble
    var data = obj.data; // 获得当前行数据
    // console.log(obj)
    // data.id
    if(obj.event === 'edit'){
      layer.open({
        title: '编辑文章信息:',
        type: 2,
        area: ['80%','80%'],
        content: '{%url "test_admin:article_edit" %}' + '?id=' + data.id
      });
    } else if(obj.event === 'my_delete'){
        layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
              // 向服务端发送删除指令
              $.ajax({
                        method: "POST",
                        url: "{%url 'api:del_article' %}",
                        data: { id: data.id},
                        success: function (xxx) {
                            if(xxx['code'] == 0){
                              obj.del(); // 删除对应行（tr）的DOM结构
                              layer.close(index);
                            }else{
                                layer.msg(xxx['msg']);
                            }
                        }
                      });
            });
    }
  });

  // 触发表格复选框选择
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });

  // 触发表格单选框选择
  table.on('radio(test)', function(obj){
    console.log(obj)
  });

  // 行单击事件
  table.on('row(test)', function(obj){
    //console.log(obj);
    //layer.closeAll('tips');
  });
  // 行双击事件
  table.on('rowDouble(test)', function(obj){
    console.log(obj);
  });

  // 单元格编辑事件
  table.on('edit(test)', function(obj){
    var field = obj.field; // 得到字段
    var value = obj.value; // 得到修改后的值
    var data = obj.data; // 得到所在行所有键值
    // 值的校验
    if(field === 'email'){
      if(!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(obj.value)){
        layer.tips('输入的邮箱格式不正确，请重新编辑', this, {tips: 1});
        return obj.reedit(); // 重新编辑 -- v2.8.0 新增
      }
    }
    // 编辑后续操作，如提交更新请求，以完成真实的数据更新
    // …
    layer.msg('编辑成功', {icon: 1});

    // 其他更新操作
    var update = {};
    update[field] = value;
    obj.update(update);
  });
});
</script>
</body>
</html>